<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at
  <p>
  http://www.apache.org/licenses/LICENSE-2.0
  <p>
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<section class="content--row">
    <div class="row">
        <!-- 文章内容 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header border-b-1 px-4 py-3">
                    <!-- 普通搜索 -->
                    <div *ngIf="!showSeniorSettings; else seniorSetting" class="card-block d-flex">
                        <div class="input-group">
                            <a class="input-group-addon" tooltip="鼠标点击我进行搜索" container="body" placement="top" (click)="searchContent()">
                                <i class="zmdi zmdi-search zmdi-hc-fw"></i>
                            </a>
                            <div class="form-group">
                                <input type="text" [(ngModel)]="searchValue" [ngModelOptions]="{standalone: true}" class="form-control" placeholder="请在此输入需要搜索的内容, 高级搜索请点击右侧按钮">
                                <i class="form-group__bar"></i>
                            </div>
                        </div>
                        <div class="ml-4">
                            <button type="button" class="btn btn-success" (click)="seniorSettings()" tooltip="点击我可以进行高级搜索" container="body" placement="top">
                                <i class="zmdi zmdi-search-for zmdi-hc-fw"></i>
                            </button>
                        </div>
                    </div>
                    <!-- 高级搜索 -->
                    <ng-template #seniorSetting>
                        <div class="card-block d-flex mt-10">
                            <div class="row col-11">
                                <div class="col-sm-3">
                                    <div class="form-group mb-0">
                                        <input type="text" [(ngModel)]="searchArticleTitle" (blur)="onSearchArticleTitle()" class="form-control" tooltip="使用内容名称进行筛选内容"
                                            container="body" placeholder="请输入搜索的内容名称">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group mb-0">
                                        <ng-select tooltip="使用标签进行筛选内容" container="body" [(ngModel)]="searchArticleTag" [options]="articleTags" (selected)="onSearchArticleTagSelected($event)"></ng-select>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group mb-0">
                                        <ng-select tooltip="使用空间进行筛选内容" container="body" [(ngModel)]="searchArticleSpace" [options]="articleSpaces" (selected)="onSearchArticleSpaceSelected($event)"></ng-select>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group mb-0">
                                        <ng-select tooltip="使用用户进行筛选内容" container="body" [(ngModel)]="searchArticleUser" [options]="articleUsers" (selected)="onSearchArticleUserSelected($event)"></ng-select>
                                    </div>
                                </div>
                            </div>
                            <div class="ml-4 col-2">
                                <button type="button" class="btn btn-success" (click)="seniorSettings()" tooltip="点击我可以进行普通搜索" container="body" placement="top">
                                    <i class="zmdi zmdi-search-for zmdi-hc-fw"></i>
                                </button>
                            </div>
                        </div>
                    </ng-template>
                </div>
            </div>
            <!-- 搜索结果 -->
            <div *ngIf="searchData; else searchError">
                <h4>共找到 {{searchData.totalElements}} 条结果数据</h4>
                <div *ngFor="let article of searchData.content" class="card">
                    <!-- 文章用户信息 -->
                    <div class="card-header border-b-1 px-4 py-3">
                        <div class="card-block d-flex py-3">
                            <div class="mr-auto">
                                <h5>
                                    <a [routerLink]="['/article/info', article.id]">{{ article?.title }}</a>
                                    <span *ngIf="(currentDay| date:'yyyyMMdd') === (article.createTime | date:'yyyyMMdd')" class="badge badge-pill badge-danger">新</span>
                                    <span *ngIf="article.articleType.id === 1" class="badge badge-pill badge-success">原</span>
                                    <span *ngIf="article.articleType.id === 2" class="badge badge-pill badge-info">转</span>
                                </h5>
                            </div>
                            <!-- 文章PV -->
                            <div class="ml-4">
                                <button type="button" class="btn btn-success btn-sm" tooltip="该文章共有{{article.viewCount}}次访问" container="body" placement="bottom">
                                    <span>
                                        <i class="zmdi zmdi-eye zmdi-hc-fw"></i>
                                        <span>{{article.viewCount}}</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                        <div *ngIf="article.user" class="media">
                            <div class="media-body">
                                <div class="user-sm">
                                    <div class="article__user__info">
                                        <img class="article__user__img" src="{{ article.user.avatar }}" alt="{{ article.user.username }}">
                                        <div class="article__user__name">
                                            <a [routerLink]="['/account', article.user.username, 'info']">{{ article.user.username }}</a> - {{ article.createTime | date:'yyyy年MM月dd日HH:mm:ss'
                                            }} 发布
                                        </div>
                                        <!-- 文章标签 -->
                                        <div class="card-block ml-10">
                                            <span *ngFor="let articleTag of article.articleTags" class="badge badge-success ml-2">{{articleTag.title}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 文章内容信息 -->
                    <div class="card-body border-b-1">
                        <p class="mb-0">
                            <wikift-editor id="editormd-{{article.id}}" markdown="{{article.content| slice: 0:100}}" [preview]="'true'"></wikift-editor>
                        </p>
                    </div>
                    <!-- 文章附属信息 -->
                    <div class="card-footer d-flex px-4 py-3">
                        <div class="mr-auto">
                            <button type="button" class="btn btn-secondary btn-sm disabled" tooltip="该文章共有{{article.fabulouCount}}位用户赞" container="body"
                                placement="bottom">
                                <span>
                                    <i class="zmdi zmdi-thumb-up zmdi-hc-fw"></i>
                                    <span>{{article.fabulouCount}}</span>
                                </span>
                            </button>
                        </div>
                        <div class="ml-4">
                            <button type="button" class="btn btn-secondary btn-sm disabled" tooltip="该文章共有{{article.commentsCount}}条评论" container="body"
                                placement="bottom">
                                <span>
                                    <i class="zmdi zmdi-comments zmdi-hc-fw"></i>
                                    <span>{{article.commentsCount}}</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mr-center">
                    <pagination *ngIf="searchData.content?.length && page" [(ngModel)]="currentPage" totalItems="{{page.totalElements}}" maxSize="{{page.size}}"
                        (pageChanged)="pageChanged($event)" [boundaryLinks]="true">
                    </pagination>
                </div>
            </div>
            <ng-template #searchError>
                <div class="mr-center">
                    <h4>请换一个关键词搜索试试看</h4>
                </div>
            </ng-template>
        </div>
        <!-- 其他功能 -->
        <div class="col-md-3">
        </div>
    </div>
</section>